<template>
  <div>
    <h1>playground</h1>
    <div class="box">
      <el-scrollbar>
        <p v-for="item in 100" :key="item">1111</p>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.box{
  width: 500px;
  height: 500px;
  background-color: rgb(255, 246, 179);
  ::v-deep {
    .el-scrollbar {
      width: 100%; // 宽度可以设置也可以不设置 因为宽度默认就是填充满父级元素的内容区
      height: 100%; // 必须设置el-scrollbar的高度
      .el-scrollbar__wrap { // 实际上我们的内容是放在这个div下面的
        // height: 100%; // 渲染出来的div.el-scrollbar__wrap默认会添加height:100%的属性。我们可以设置为105%来隐藏元素水平滚动条
        overflow-x:auto;
      }
      .el-scrollbar__thumb {
        background-color: black !important;
      }
    }
  }
}
</style>
